<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>物资管理</el-breadcrumb-item>
        <el-breadcrumb-item>物资资料</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px;width:100%">
      <div style="width:100%;">
        <el-alert title="友情提示: 商品的分类只支持三级分类" type="warning" show-icon></el-alert>
        <!-- 头部表单 -->
        <el-row>
          <el-form
              :model="instocksForm"
              ref="instocksForm"
              :inline="true"
              style="margin-top:10px;margin-left:20px;height:40px;"
            >
            <el-col :span="6">
              <el-form-item>
                <el-cascader
                  placeholder="请选择分类查询"
                  clearable
                  v-model="instocksForm.categoryId"
                  :options="productCategory"
                  :props="{ expandTrigger: 'hover',checkStrictly: true }"
                  style="height:50px"
                ></el-cascader>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-input
                  v-model="instocksForm.name"
                  placeholder="请输入物资名称查询"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item>
                <el-select v-model="instocksForm.status" clearable>
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button type="primary" class="el-icon-search" @click="handleSearch" >查找</el-button>
              <el-button @click="handleReset" type="warning" class="el-icon-refresh-left">重置</el-button>
              <el-button type="success" @click="handleAdd" class="el-icon-plus" >添加</el-button>
              <el-button @click="handleRefresh" class="el-icon-refresh">刷新</el-button>
            </el-col>
          </el-form>
        </el-row>
        <!-- 表格 -->
        <el-table border stripe :data="productList" ref="multipleTable" style="width:1550px;margin:20px 20px">
          <el-table-column
              label="ID"
              type="index"
              width="50">
          </el-table-column>
          <el-table-column label="图片" align="center" width="150">
            <template slot-scope="scope">
              <img :src="scope.row.imageUrl" alt="" style="with:100px">
            </template>
          </el-table-column>
          <el-table-column label="物资名称" align="center" width="150">
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column label="物资编号" align="center" width="300">
            <template slot-scope="scope">
              {{ scope.row.pnum }}
            </template>
          </el-table-column>
          <el-table-column label="物资规格" align="center" width="100">
            <template slot-scope="scope">
              <span class="model">{{ scope.row.model}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" align="center" width="100">
            <template slot-scope="scope">
              {{ scope.row.unit }}
            </template>
          </el-table-column>
          <el-table-column label="备注" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.remark }}
            </template>
          </el-table-column>
          <el-table-column label="状态" align="center" width="100">
            <template slot-scope="scope">
              <span class="status">{{ scope.row.status|status }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" width="200">
            <template slot-scope="scope">
              {{ scope.row.createTime }}
            </template>
          </el-table-column>
        
          
          <el-table-column label="操作" align="center" >
            <template slot-scope="scope">
              <el-button @click="handleEdit(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button size="mini" type="text" @click="delete(scope.row.id)" icon="el-icon-s-operation">回收站</el-button>
              
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <div class="pagination-container" style="margin-left:20px">
            <el-pagination
              background
              layout="total,sizes,prev, pager, next,jumper"
              :total="total"
              :page-size="instocksForm.pageSize"
              :current-page="instocksForm.pageNum"
              :page-sizes="[5,10,15,20]"
              @current-change="handlePageChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
        </div>
        <!-- 编辑和添加-->
        <el-dialog
          :title="isEdit?'编辑物资':'添加物资'"
          :visible="isShow"
          width="52%"
          :before-close="handleClose"
          >
          <el-form :model="productsAdd"  class="form" style="margin-left:20px"  :inline="true">
              <el-form-item label="物资名称">
                <el-input  type="text" v-model="productsAdd.name" style="width:800px" ></el-input>
              </el-form-item>
              <el-form-item label="物资图片">
                    <el-upload
                      action="#"
                      list-type="picture-card"
                      :auto-upload="false">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                          <img
                            class="el-upload-list__item-thumbnail"
                            :src="file.url" alt=""
                          >
                          <span class="el-upload-list__item-actions">
                            <span
                              class="el-upload-list__item-preview"
                              @click="handlePictureCardPreview(file)"
                            >
                              <i class="el-icon-zoom-in"></i>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleDownload(file)"
                            >
                              <i class="el-icon-download"></i>
                            </span>
                            <span
                              v-if="!disabled"
                              class="el-upload-list__item-delete"
                              @click="handleRemove(file)"
                            >
                              <i class="el-icon-delete"></i>
                            </span>
                          </span>
                        </div>
                    </el-upload>
                    <!-- <el-dialog :visible.sync="dialogVisible">
                      <img width="100%" :src="productsAdd.imageUrl" alt="">
                    </el-dialog> -->
              </el-form-item>
              <div>
                <el-form-item label="物资规格">
                  <el-input type="text" v-model="productsAdd.model" style="width:400px" ></el-input>
                </el-form-item>
                <el-form-item label="分类" style="margin-left:100px">
                    <el-cascader
                      placeholder="请选择"
                      clearable
                      v-model="productsAdd.categoryKeys"
                      :options="productCategory"
                      :props="{ expandTrigger: 'hover',checkStrictly: true }"
                      style="width: 260px;height:50px;"
                    >
                    </el-cascader>
                </el-form-item>
              </div>
              <div>
                <el-form-item label="单位" style="margin-left:26px">
                  <el-input type="text" v-model="productsAdd.unit" style="width:400px" ></el-input>
                </el-form-item>
                <el-form-item label="排序" style="margin-left:100px">
                  <el-input-number v-model="productsAdd.sort" :min="1" :max="10" label="描述文字"></el-input-number>
                </el-form-item>
                </div>
              <el-form-item  label="备注信息">
                <el-input type="textarea" v-model="productsAdd.remark" style="width:840px"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button @click="handleClose">取 消</el-button>
              <el-button type="primary" @click="handleSure">确 定</el-button>
            </span>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
  let instocksForm ={
    pageNum:1,
    pageSize:5,
    status:null,
    categoryId:null,
    name:null,
    demo:"",
  }
  let productsAdd = {
    imageUrl:"",      //图片
    name:"",          //名称
    pnum:"",          //编号
    model:"",         //物资规格
    unit:"",          //单位
    remark:"",        //备注
    status:"",        //状态
    createTime:"",    //创建时间
    sort:"",          //排序
  }
export default {
  data(){
    return{
      instocksForm:Object.assign({}, instocksForm),
      productsAdd:Object.assign({},productsAdd),
      productList:[],
      //选择器
      options: [{value: 0,label: '正常'}, 
                {value: 1,label: '回收站'}, 
                {value: 2,label: '待审核'}],
      value: '正常',

      productCategory:[],
      total:null,
      //上传组件使用的
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      isEdit:false,
      isShow:false,
    }
  },
  created(){
    this.getinStocksList()
    this.getCategory()
  },
   methods:{
     getdata(data){
       let arr = [];
          data.forEach(item=>{
            let obj = {}  
            obj.value = item.id
            obj.label = item.name  
             if(item.children&&item.children.length>=0){
               obj.children =  this.getdata(item.children)
             }
             arr.push(obj)
        })
        return arr
     },
      //获取物资资料列表信息
      async getinStocksList(){
        let categorys = null
      if(this.instocksForm.categoryId!=null){
           categorys = this.instocksForm.categoryId.join(",")
          
      }
         let  instocksForms = {
        pageNum:this.instocksForm.pageNum,
        pageSize:this.instocksForm.pageSize,
        status:this.instocksForm.status,
        categorys:categorys,
        name:this.instocksForm.name
        }
        console.log(instocksForms)
          let res =  await this.$http.get("/product/findProductList",{params:instocksForms});
          console.log(res)
          if(res.status===200){
            this.productList = res.data.data.rows
            this.total = res.data.data.total
            this.$message.success("获取物资资料列表信息成功")
          }else{
            this.$message.warning("获取物资资料列表信息失败")
          }
      },
      //获取分类信息
      async getCategory(){
        let res =  await this.$http.get("/productCategory/categoryTree");
        console.log(res)
        if(res.data.code===200){
          let options= this.getdata(res.data.data.rows)
          this.productCategory = options
        }
      },
      //页码变化
      handlePageChange(val){
       this.instocksForm.pageNum = val
       this.getinStocksList()
      },
      //点击一页显示多少条
      handleSizeChange(val){
        this.instocksForm.pageSize = val
        this.instocksForm.pageNum = 1
        this.getinStocksList()
      },
      //头部搜索功能
      handleSearch(){
          this.getinStocksList()
      },
      //重置功能
      handleReset(){
        this.instocksForm=Object.assign({},instocksForm)
        this.getinStocksList()
      },
      //添加功能
      handleAdd(){

      },
      //刷新功能
      handleRefresh(){

      },
      //上传组件使用的方法
      handleRemove(file) {
        console.log(file);
      },
      handlePictureCardPreview(file) {
        this.productsAdd.imageUrl = file.url;
        this.dialogVisible = true;
      },
      handleDownload(file) {
        console.log(file);
      },

    //Dialog对话框
      //小叉子和取消
     handleClose(){
       this.isShow  = false
       this.isEdit = false
       this.productsAdd = Object.assign({}, productsAdd)
     },
     //确定编辑和添加
     async handleSure(){
       if(this.isEdit){
           let res =  await this.$http.put("/product/edit/"+this.productsAdd.name,this.productsAdd.pnum);
           if(res.data.code==200){
              this.isEdit = false
              this.isShow = false
              this.$message.success("用户编辑成功")
              this.getinStocksList()
              this.productsAdd = Object.assign({}, productsAdd)
           }
       }else{
          let res =  await this.$http.post("/product/add",this.productsAdd);
          if(res.data.code===200){
          this.isShow = false
         this.$message.success("用户添加成功")
         this.getinStocksList()
         this.productsAdd = Object.assign({}, productsAdd)
       }else{
         this.$message.warning(res.data.msg)
       }
       }
      
     },
     //添加
     handleAdd(){
       this.isShow=true
       console.log("aaaaaaaa")
     },
     //编辑
     async handleEdit(row){
        let res =  await this.$http.get("/product/edit/"+row.id);
        console.log("9999999999999999999",res)
        if(res.data.code===200){
          this.isShow = true
          this.isEdit = true
          this.productsAdd = res.data.data  
          this.productsAdd.categoryKeys = [res.data.data.oneCategoryId,res.data.data.twoCategoryId,res.data.data.threeCategoryId]
          console.log(this.productsAdd)    
        }
     },





    },
    filters:{
      type(val){
        if(val===1){
          return "捐赠"
        }else if(val===2){
          return "下拨"
        }
      },
      status(val){
        if(val===0){
          return "正常"
        }else if(val === 1){
          return "回收站"
        }else {
          return "待审核"
        }
      }
    }
}
</script>

<style lang="less" scoped>
  // .type{
  //   text-align: center;
  //   width: 60px;
  //   height: 30px;
  //   line-height: 30px;
  //   background-color: #F0F9EB;
  //   color: #AECC3A;
  //   border-radius: 5px;
  //   display: inline-block;
  // }
  // .status{
  //   text-align: center;
  //   width: 60px;
  //   height: 30px;
  //   line-height: 30px;
  //   border: 1px solid #4078FF;
  //   color: #4078FF;
  //   border-radius: 5px;
  //   display: inline-block;
  //   font-size: 13px;
  // }
</style>

